<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }

    </style>
</head>
<body>
    <!-- 商品分类展示 -->

    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" >
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">类型名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="relationshipName" autocomplete="off" class="layui-input relationshipName">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">类型等级</label>
                                <div class="layui-input-inline">
                                    <select name="relationShipType" class="layui-input relationShipType">
                                        <option value="-1">全部</option>
                                        <c:forEach items="${listRelationType}" var="listRelationType">
                                            <option value="${listRelationType.relationshipTypeId}">${listRelationType.relationshipTypeName}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="RelationShipFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>

            <script type="text/html" id="toolbarDemo">
                <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addOne">
                    <i class="layui-icon layui-icon-add-1"></i>
                    添加一级分类
                </button>
                <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addTow">
                    <i class="layui-icon layui-icon-add-1"></i>
                    添加二级分类
                </button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="return">
                    <i class="layui-icon layui-icon-return"></i>
                    返回
                </button>
      <%--          <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                    <i class="layui-icon layui-icon-delete"></i>
                    删除
                </button>--%>
            </script>

            <table class="layui-hide" id="RelationShipTableFilter" lay-filter="RelationShipTableFilter"></table>

            <script type="text/html" id="RelationShipOperate">
<%--
                <a class="layui-btn  layui-btn-normal layui-btn-sm "  lay-event="uptate"><i class="layui-icon layui-icon-edit">修改</i></a>
--%>
              <%--  <a class="layui-btn layui-btn-sm layui-btn-danger   data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete">删除</i></a>--%>
            </script>

        </div>

    </div>
    <script src="static/component/layui/layui.js"></script>
    <script src="static/component/pear/pear.js"></script>
    <script>
        //引入table
        layui.use(['table','form'],function (){
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;

            var pid1 =null;
            var relationShipType1= null;
            var relationShipName1= null;
            var pageNo1 = null;
            var pageSize = null;
            //执行表格填充
            table.render({
                //指定渲染的表格
                elem:'#RelationShipTableFilter',
                //渲染表格的路径
                url:'relationShip/selectListRelationShip',
                //请求方式
                method:'post',
                //开启分页复选框
                page:true,
                check:true,
                toolbar:'#toolbarDemo',
                //每页显示数量
                limits:[1,5,10,15],
                even:true,
                cols:[[
                    {type: "checkbox",   align: 'center'},
                    {field:'relationshipId',title:'编号',  align: 'center'},
                    {field:'relationshipName',title:'分类名称',  align: 'center'},
                    {field:'pid',title:'父级编号',  align: 'center'},
                    {field:'relationShipType',title:'类型等级', templet:'#relationShipType', align: 'center'},
                    {title:'操作',align: 'center', templet: function (d) {
                            var state = "";
                            if (d.pid!= 0) {

                                    state = "<button type='button' class='layui-btn layui-btn-disabled layui-btn-sm' > <i class='layui-icon-triangle-d layui-icon '>子分类</i></button>"+
                                        "<a class='layui-btn  layui-btn-normal layui-btn-sm '  lay-event='uptate'><i class='layui-icon layui-icon-edit'>修改</i></a>" +
                                        "  <a class='layui-btn layui-btn-sm layui-btn-danger   data-count-delete' lay-event='delete'><i class='layui-icon layui-icon-delete'>删除</i></a>";
                            }else {
                                    state = "<button type='button' class='layui-btn  layui-btn-sm' lay-event='selectFind'><i class='layui-icon-triangle-d layui-icon '>子分类</i></button>  " +
                                        "<a class='layui-btn  layui-btn-normal layui-btn-sm '  lay-event='uptateOne'><i class='layui-icon layui-icon-edit'>修改</i></a>"+
                                "  <a class='layui-btn layui-btn-sm layui-btn-danger   data-count-delete' lay-event='delete'><i class='layui-icon layui-icon-delete'>删除</i></a>";
                            }
                            return state;
                        }}
                ]]
            })

            //表格的table事件
            table.on('tool(RelationShipTableFilter)',function (obj){
                //判断选择的类型
                if (obj.event ==='uptate'){
                    layer.open({
                        title:'修改二级类型信息',
                        type: 2,
                        shade:0.1,
                        area:['25%','40%'],
                        content:'relationShip/skipRelationShipUpdate?relationshipId='+obj.data.relationshipId //路径
                    })
                }else if(obj.event=='uptateOne'){
                    layer.open({
                        title:'修改一级类型信息',
                        type: 2,
                        shade:0.1,
                        area:['25%','25%'],
                        content:'relationShip/skipRelationShipUpdateOne?relationshipId='+obj.data.relationshipId //路径
                    })

                }else if(obj.event==='delete'){
                    layer.confirm('真的要删除吗?',function(index){
                      $.post("relationShip/deleteRelationShip",{relationshipId:obj.data.relationshipId},function (result){
                          if (result.success) {
                              layer.msg(result.msg,{
                                  icon: 1,
                                  time: 1000
                              }, function() {
                                  //执行重载
                                  table.reload('RelationShipTableFilter');
                                  layer.close(index);
                              });
                          }else{
                              layer.msg(result.msg,{icon:2},function (index){
                                  layer.close(index);
                              })
                          }
                      })
                    })

                }else{
                    //也不知道咋回事,反正这样能获取页数就完事了
                    pageSize =  $(".layui-laypage-limits").find("option:selected").val() //分页数目
                    pageNo1 = $(".layui-laypage-em").next().html();
                    //把值提前存起来,方便返回
                    relationShipName1 = $(".relationshipName").val();
                    relationShipType1 = $(".relationShipType").val();
                    //清空
                    $(".relationshipName").val("");
                    $(".relationShipType").val(-1);
                    form.render('select');
                    pid1 = obj.data.relationshipId;
                    //子分类查询
                    //执行搜索的重载
                    table.reload('RelationShipTableFilter',{

                        page:{
                            //默认第几页
                            curr:1
                        },
                        where:{
                            //传递请求参数
                            relationShipType:$(".relationShipType").val(),
                            relationshipName:$(".relationshipName").val(),
                            pid:obj.data.relationshipId
                        }

                    });
                    return false;

                }
            })


            //添加删除按钮事件
            table.on('toolbar(RelationShipTableFilter)',function (obj){
                //判断类型
                if (obj.event==='addOne'){
                    //添加一级分类
                    layer.open({
                        title:'添加一级类型信息',
                        type: 2,
                        shade:0.1,
                        area:['25%','20%'],
                        content:'relationShip/relationShipAddOne'//路径
                    })
                }else if(obj.event==='addTow'){
                    //添加二级分类
                    layer.open({
                        title:'添加二级分类',
                        type:2,
                        shade:0.1,
                        area:['25%','30%'],
                        content:'relationShip/skipAddRelationShipTwo'
                    })
                }else if(obj.event==='return'){
                    //返回上一级
                    //执行搜索的重载
                    table.reload('RelationShipTableFilter',{
                        page:{
                            //默认第几页
                            curr:pageNo1,
                            limit:pageSize
                        },
                        where:{
                            //传递请求参数
                            relationShipType:relationShipType1,
                            relationshipName:relationShipName1,
                        }

                    });
                    //给搜索框赋值
                    $(".relationshipName").val(relationShipName1);
                    $(".relationShipType").val(relationShipType1);
                    form.render('select');

                    //清空
                    relationShipType1 = -1;
                    relationShipName1 = null;
                    pid1 = null;
                    return false;
                }
            })


            //表单的form提交事件
            form.on('submit(RelationShipFormSubmit)',function(data){
                let pid = null;
                if (pid1!=null){
                    pid = pid1;
                }

                //执行搜索的重载
                table.reload('RelationShipTableFilter',{
                    page:{
                        //默认第几页
                        curr:1
                    },
                    where:{
                        //传递请求参数
                        relationShipType:data.field.relationShipType,
                        relationshipName:data.field.relationshipName,
                        pid:pid
                    }

                });
                return false;
            })


        })

    </script>
    <script type="text/html" id="relationShipType">
        {{d.relationShipType.relationshipTypeName}}
    </script>
</body>
</html>